import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:im_app/im/page/view/component/UiUtil.dart';
import 'package:im_app/im/util/ImConstant.dart';

import '../bloc/MessageListCubit.dart';

class CaptureAudioView extends StatelessWidget {
  final int sessionId;

  const CaptureAudioView({required this.sessionId, super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [_buildBackgroundPane(context), _buildAudioPane(context)],
    );
  }

  Widget _buildBackgroundPane(BuildContext context) {
    return Positioned.fill(
        child: GestureDetector(
            onTap: () {},
            child: Opacity(
                opacity: 0.6,
                child: Container(
                  color: ImConstant.IM_MAIN_BACKGROUND_COLOR,
                ))));
  }

  Widget _buildAudioPane(BuildContext context) {
    var messageListCubit = context.read<MessageListCubit>();
    return Positioned.fill(
        top: 200,
        child: Column(
          children: [
            Text.rich(TextSpan(children: [
              const TextSpan(text: '录音时长：'),
              TextSpan(text: '${(messageListCubit.state.audioTime/1000).toStringAsFixed(1)}s'),
            ])),
            const SizedBox(
              height: 60,
            ),
            if (messageListCubit.state.isPause) buildSvgView('assets/svg/pause.svg', 50, 50, Colors.green),
            if (!messageListCubit.state.isPause) buildSvgView('assets/svg/audio_wave.svg', 50, 50, Colors.green),
            const SizedBox(
              height: 80,
            ),

            const Expanded(child: Text('')),

            this._buildSubmitPane(context),

            const SizedBox(
              height: 30,
            ),

            _buildAudioControlPane(),

            const SizedBox(
              height: 40,
            ),
          ],
        ));
  }

  // 语音录制提交栏： 取消。 发送
  Widget _buildSubmitPane(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        ImageButton(resource: 'assets/svg/cancel.svg', text: '取消', imageSize: 50, callBack: (){
          var messageListCubit = context.read<MessageListCubit>();
          messageListCubit.add(MessageListShowAudioEvent(!messageListCubit.state.isAudio));
        },),

        ImageButton(resource: 'assets/svg/submit.svg', text: '提交', imageSize: 50, callBack: (){
          var messageListCubit = context.read<MessageListCubit>();
          messageListCubit.add(MessageListSubmitAudioEvent());
        }),
      ],
    );
  }

  // 语音录制控制按钮： 暂停 、 继续
  Widget _buildAudioControlPane() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        ImageButton(resource: 'assets/svg/pause.svg', text: '暂停', imageSize: 40, callBack: (){}),

        const SizedBox(
          width: 30,
        ),

        ImageButton(resource: 'assets/svg/start.svg', text: '启动', imageSize: 40, callBack: (){}),

        const SizedBox(
          width: 60,
        )
      ],
    );
  }
}

class ImageButton extends StatefulWidget {
  final String resource;
  final String text;
  final double imageSize;
  final Function callBack;

  const ImageButton({required this.resource, required this.text, required this.imageSize, required this.callBack,
    super.key});

  @override
  State<StatefulWidget> createState() => ImageButtonState();
}

class ImageButtonState extends State<ImageButton> {
  double _scale = 1.0;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: widget.imageSize + 50,
      child: Column(
        children: [
          Text(widget.text, style: const TextStyle(fontSize: ImConstant.IM_SMALL_SIZE, color: Colors.grey),),
          const SizedBox(
            height: 5,
          ),
          Transform.scale(
            scale: _scale,
            child: Container(
              padding: const EdgeInsets.all(5),
              decoration: BoxDecoration(borderRadius: BorderRadius.circular((widget.imageSize ?? 60) * 1.5), color: Colors.white),
              child: GestureDetector(
                onTapDown: (TapDownDetails details) {
                  setState(() {
                    _scale = 1.5;
                  });
                },
                onTapUp: (TapUpDetails details) {
                  setState(() {
                    _scale = 1.0;
                  });
                  widget.callBack();
                },
                child: buildSvgView(
                  widget.resource,
                  widget.imageSize,
                  widget.imageSize,
                  null,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
